<template>
  <div class="container">
    <Header v-bind:isIndex="isIndex" :isVideo="isVideo" :isBack="isBack"></Header>
    <!-- 头部导航分类 -->
    <div class="header-nav">
      <div class="nav-list">
        <div
          class="item"
          v-for="(item,index) in headerNav"
          :key="index"
          :class="{active:item.id == navIndex}"
          @click="checkType(item.id)"
        >
          <div class="text fs-32" :class="{active:item.id == navIndex}">{{item.video_cate_name}}</div>
          <div class="line" v-show="item.id == navIndex"></div>
        </div>
      </div>
    </div>
    <!-- 视频列表分类 -->
    <div class="video-lists">
      <div class="items" v-for="(item,index) in videoList" :key="index">
        <div class="img-video" v-if="item.video_url">
          <!-- <img v-if="item.id != activeIndex" :src="item.video_cover" alt class="video-pic" /> -->
          <!-- :autoplay="item.id == activeIndex" -->
          <video
            :id="item.id"
            :src="item.video_url"
            :poster="item.video_cover"
            ref="videoList"
            @click.stop="control($event,item)"
            class="myvideo"
          ></video>
          <!-- <img :src="userImg" alt /> -->
          <img
            :src="playBtn"
            alt
            class="play-btn"
            v-show="item.isShowVideo"
            @click="playVideo(item)"
          />
          <!-- @click.stop="playVideo(item)" -->
          <!-- <div class="play-mes">
            <div class="left">
              <img :src="playBtnS" alt />
              <span class="num fs-24">190万</span>
            </div>
            <div class="right">
              <img :src="videoPlay" alt />
              <span class="num fs-22">08:08</span>
            </div>
          </div>-->
        </div>
        <div class="text fs-32" @click="toVideoDetail(item.id)">{{item.title}}</div>
        <div class="bottom" @click="toVideoDetail(item.id)">
          <div class="left">
            <div class="img">
              <img :src="item.user_avator" alt />
            </div>
            <div class="name fs-28">{{item.nickname}}</div>
          </div>
          <div class="right">
            <div class="support" @click="supportVideo(item.id)">
              <img v-if="item.is_click == 1" :src="supported" alt />
              <img v-else :src="support" alt />
              <span class="num">{{item.click_number}}</span>
            </div>
            <div class="comment">
              <img :src="comment" alt />
              <span class="num">{{item.comment}}</span>
            </div>
            <div class="more">
              <img :src="more" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 直播列表分类 -->
    <div class="broadcast" v-if="broadcastList.length != 0">
      <div class="items">
        <div class="img-video" :class="{fixed:item.id == activeIndex}">
          <img :src="userImg" alt />
          <img :src="playBtn" alt class="play-btn" />
          <div class="playing-mes">
            <img :src="videoPlay" alt />
            <span class="txt fs-22">直播中</span>
          </div>
        </div>
        <div class="text fs-32">2019周洁琼霍尊《醉赤壁+日不落》-2019周洁琼霍尊《醉赤壁+日不落》</div>
        <div class="bottom">
          <div class="left">
            <div class="img">
              <img :src="headerPic" alt />
            </div>
            <div class="name fs-28">爱格尼很</div>
          </div>
          <div class="right">
            <div class="fire">
              <img :src="fire" alt />
              <span class="num">203</span>
            </div>
            <div class="more">
              <img :src="more" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="camera" @click="publishVideo">
      <img :src="camera" alt />
      <span class="fs-20">上传</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "video-list",
  data() {
    return {
      isIndex: true,
      isVideo: true,
      isBack: true,
      navIndex: 0,
      isSupport: true, //当前是否是点赞状态
      isShowImg: true,
      headerNav: [
        {
          id: 1,
          text: "推荐"
        },
        {
          id: 2,
          text: "LOOK直播"
        },
        {
          id: 3,
          text: "广场"
        },
        {
          id: 4,
          text: "告白の夜"
        },
        {
          id: 5,
          text: "翻唱"
        },
        {
          id: 6,
          text: "广场"
        },
        {
          id: 7,
          text: "告白の夜"
        },
        {
          id: 8,
          text: "翻唱"
        }
      ], //头部导航栏数据
      userImg: require("@/assets/image/ticket.png"),
      headerPic: require("@/assets/image/cove.png"),
      support: require("@/assets/index/praise.png"),
      comment: require("@/assets/index/comment.png"),
      supported: require("@/assets/index/support-mine.png"),
      more: require("@/assets/index/more.png"),
      playBtn: require("@/assets/index/playVideoB.png"),
      playBtnS: require("@/assets/index/playVideoS.png"),
      videoPlay: require("@/assets/index/play.png"),
      fire: require("@/assets/index/fire.png"),
      camera: require("@/assets/index/cameras.png"),
      videoList: [], //视频列表数据
      activeIndex: 0,
      broadcastList: [], //直播列表数据
      isShowVideo: false,
      currentvideo: 0,
      islogin:true,
    };
  },
  components: {},
  methods: {
    control(e, item) {
      let current = e.target;
      if (current.paused) {
        // 如果视频是暂停的
        current.play();
        item.isShowVideo = false;
        this.$forceUpdate();
      } else {
        current.pause();
        item.isShowVideo = true;
        this.$forceUpdate();
      }
    },
    // 判断用户是否登录了
    getuserinfo() {
      var url = this.$host1 + `home/getPersonalMsg`;
      this.$axios
        .get(url)
        .then(res => {
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
            } else if (resData.code == 0) {
              this.islogin = false;
              this.AlertWin(resData.message);
              this.$router.push('/login');
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    // 点赞视屏
    supportVideo(id) {
      // 这里的id是视频id
      const url = this.$host1 + `home/dynamic/ClickRecord`;
      var params = {
        dynamic_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            if (this.navIndex == 0) {
              const url =
                this.$host1 + `home/dynamic/videoList?is_recommend=` + 1;
              this.getVideoList(url);
            } else {
              const url =
                this.$host1 +
                `home/dynamic/videoList?video_cate_id=` +
                this.navIndex +
                `&is_recommend=` +
                "";
              this.getVideoList(url);
            }
          } else {
            console.log(this.navIndex, "---");
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 切换封面图和视频
    playVideo(item) {
      if (item.id != this.currentvideo && this.currentvideo != 0) {
        document.getElementById(this.currentvideo).pause();
      }

      document.getElementById(item.id).play();
      item.isShowVideo = false;
      this.$forceUpdate();
      this.currentvideo = item.id;
      // this.activeIndex = item.id;
      // console.log(this.$refs.videoList, "---000");
    },
    // 选择头部导航类型
    checkType(id) {
      // 这里的id是头部导航的分类id
      this.activeIndex = 0;
      this.navIndex = id;
      if (id == 0) {
        const url = this.$host1 + `home/dynamic/videoList?is_recommend=` + 1;
        this.getVideoList(url);
      } else {
        const url =
          this.$host1 +
          `home/dynamic/videoList?video_cate_id=` +
          id +
          `&is_recommend=` +
          "";
        this.getVideoList(url);
      }
    },
    // 获取视频分类列表数据
    getVideoType() {
      const url = this.$host1 + `home/dynamic/videoCateList`;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--");
          if (res.data.code == 200) {
            this.headerNav = res.data.data;
            this.headerNav.unshift({
              id: 0,
              video_cate_name: "推荐"
            });
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取分类下面的视频
    getVideoList(url) {
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data.result, "---res.data.data.result--");
          if (res.data.code == 200) {
            this.videoList = res.data.data.result;
            this.videoList.map(item => {
              item.isShowVideo = true;
            });
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 视频详情页面
    toVideoDetail(id) {
      this.$router.push({
        path: "/index/video-Detail",
        query: { id: id }
      });
    },
    // 发布视频
    publishVideo() {
      this.getuserinfo();
      this.$router.push({
        path: "/publicDynamic",
        query: { type: 2, status: 1 }
      });
    }
  },
  created() {
    this.getVideoType(); //获取视频分类列表
    var url = this.$host1 + `home/dynamic/videoList?is_recommend=` + 1;
    this.getVideoList(url);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  padding-top: 2.02rem;
  box-sizing: border-box;
  // 头部导航分类样式设置
  .header-nav {
    width: 100%;
    position: fixed;
    left: 0;
    top: 1rem;
    z-index: 999;
    // width: 100%;
    height: 1.02rem;
    line-height: 1.02rem;
    background-color: #fff;
    .nav-list {
      height: 1.02rem;
      padding: 0 0.24rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      .item {
        width: auto;
        margin-right: 0.64rem;
        height: 100%;
        position: relative;
        .text {
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
        }
        .line {
          position: absolute;
          width: 100%;
          left: 0;
          bottom: 0;
          height: 0.05rem;
          border-radius: 0.03rem;
          background-color: #540479;
        }
      }
      .active {
        font-size: 0.36rem;
        font-weight: 800;
        color: #540479 !important;
      }
    }
    .nav-list::-webkit-scrollbar {
      display: none;
    }
  }
  // 视频列表样式设置
  .video-lists,
  .broadcast {
    .items {
      padding-top: 0.45rem;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 0.24rem;
      .img-video {
        width: 100%;
        height: 4rem;
        padding: 0 0.25rem 0 0.23rem;
        box-sizing: border-box;
        margin-bottom: 0.49rem;
        position: relative;
        video {
          width: 100%;
          height: 100%;
        }
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0.18rem;
        }
        .play-btn {
          position: absolute;
          left: 50%;
          top: 40%;
          width: 0.51rem;
          height: 0.63rem;
        }
        .play-mes {
          position: absolute;
          left: 0;
          bottom: 0.19rem;
          padding: 0 0.52rem 0 0.45rem;
          box-sizing: border-box;
          width: 100%;
          height: 0.4rem;
          display: flex;
          justify-content: space-between;
          .left {
            display: flex;
            align-items: center;
            img {
              width: 0.16rem;
              height: 0.19rem;
              margin-right: 0.12rem;
            }
            .num {
              font-weight: bold;
              color: rgba(255, 255, 255, 1);
              line-height: 48px;
            }
          }
          .right {
            display: flex;
            align-items: center;
            img {
              width: 0.29rem;
              height: 0.23rem;
              margin-right: 0.16rem;
            }
            .num {
              font-weight: bold;
              color: rgba(255, 255, 255, 1);
              line-height: 0.48rem;
            }
          }
        }

        .playing-mes {
          position: absolute;
          width: 1.42rem;
          height: 0.45rem;
          right: 0.5rem;
          top: 0.16rem;
          border-radius: 0.25rem;
          display: flex;
          align-items: center;
          background-color: #f44349;
          img {
            width: 0.29rem;
            height: 0.23rem;
            margin-left: 0.19rem;
            margin-right: 0.09rem;
          }
          span {
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 0.48rem;
          }
        }
      }
      .text {
        padding: 0 0.25rem 0 0.23rem;
        box-sizing: border-box;
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        line-height: 0.48rem;
        margin-bottom: 0.43rem;
      }
      .bottom {
        padding: 0 0.25rem 0 0.23rem;
        box-sizing: border-box;
        width: 100%;
        height: 1.1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top: 0.01rem solid #eee;
        .left {
          display: flex;
          flex-direction: row;
          align-items: center;
          .img {
            width: 0.73rem;
            height: 0.73rem;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 0.18rem;
            img {
              width: 100%;
            }
          }

          .name {
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
            line-height: 0.48rem;
          }
        }

        .right {
          display: flex;
          flex-direction: row;
          align-items: center;
          // margin-left: 2.7rem;
          .support {
            width: 0.29rem;
            height: 0.29rem;
            position: relative;
            img {
              width: 100%;
            }
            .num {
              position: absolute;
              top: -0.2rem;
              right: -0.2rem;
              font-size: 0.2rem;
              color: #999999;
            }
          }
          .comment {
            position: relative;
            width: 0.29rem;
            height: 0.29rem;
            margin-left: 0.6rem;
            img {
              width: 100%;
            }
            .num {
              position: absolute;
              top: -0.2rem;
              right: -0.2rem;
              font-size: 0.2rem;
              color: #999999;
            }
          }
          .more {
            position: relative;
            width: 0.05rem;
            height: 0.4rem;
            margin-left: 0.6rem;
            margin-top: 0.2rem;
            img {
              width: 100%;
            }
          }
          .fire {
            width: 0.32rem;
            height: 0.35rem;
            margin-right: 0.9rem;
            display: flex;
            flex-direction: row;
            img {
              width: 100%;
              margin-right: 0.13rem;
            }
            .num {
              font-size: 0.2rem;
              color: #999999;
            }
          }
        }
      }
    }
  }
  .camera {
    width: 1.08rem;
    height: 1.08rem;
    border-radius: 50%;
    background-color: #540479;
    position: fixed;
    text-align: center;
    right: 0.22rem;
    bottom: 2rem;
    img {
      width: 0.49rem;
      height: 0.4rem;
      margin: 0 auto;
      margin-top: 0.2rem;
    }
    span {
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
